<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Invoice</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .header {
            display: flex;
            align-items: center;
        }
        .logo {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin-right: 20px;
        }
        .company-info {
            flex: 1;
        }
        .invoice-title {
            text-align: right;
            font-size: 24px;
            font-weight: bold;
        }
        .divider {
            border: 1px solid #000;
            margin: 15px 0;
        }
        .bill-to {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        .client-info p {
            margin: 2px 0;
        }
        .invoice-details p {
            margin: 2px 0;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid #000;
        }
        th, td {
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        .total-section {
            text-align: right;
            margin-top: 10px;
        }
        .total-section p {
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <div class="header">
        <img src="your-logo-url.png" alt="Logo" class="logo">
        <div class="company-info">
            <p>[CyberWin Future]</p>
            <p>[Fairy alliance city f]</p>
            <p>[City], [State] [Postal Code]</p>
            <p>[Phone +65 000111]</p>
            <p>[mail:admin@ynwlec.sg]</p>
        </div>
        <div class="invoice-title">Invoice</div>
    </div>
    <div class="divider"></div>
    <div class="bill-to">
        <div class="client-info">
            <p><strong>Bill To</strong></p>
            <p>[Client Name]</p>
            <p>[Client Address line 1]</p>
            <p>[City], [State] [Postal code]</p>
        </div>
        <div class="invoice-details">
            <p><strong>Invoice Number</strong> 2001321</p>
            <p><strong>Date</strong> 9/7/2025</p>
            <p><strong>Due Date</strong></p>
            <p><strong>Terms</strong></p>
        </div>
    </div>
    <table>
        <thead>
            <tr>
                <th>Description</th>
                <th>Quantity</th>
                <th>Unit price</th>
                <th>Amount</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>veg</td>
                <td>10</td>
                <td>₺ 100.00</td>
                <td>₺ 1,000.00</td>
            </tr>
            <tr>
                <td>flour</td>
                <td>1</td>
                <td>₺ 1,000.00</td>
                <td>₺ 1,000.00</td>
            </tr>
        </tbody>
    </table>
    <div class="total-section">
        <p><strong>Subtotal</strong> ₺ 2,000.00</p>
        <p><strong>consume</strong> ₺ 60.00</p>
        <p><strong>Total Due</strong> ₺ 2,060.00</p>
        <p><strong>Paid Amount</strong> ₺ 0.00</p>
        <p><strong>Balance Due</strong> ₺ 2,060.00</p>
    </div>
</body>
</html>
